<template>
	<el-dialog v-model="dialogVisible" title="修改客户信息" width="800">
		<el-form label-width="80">
			<el-row :gutter="12">
				<el-col :span="12">
					<el-form-item label="姓名">
						<el-input :disabled="true" v-model="form.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="手机">
						<el-input :disabled="true" v-model="form.mobile"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="微信">
						<el-input v-model="form.wechat"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="年龄">
						<el-input-number :min="18" v-model="form.age"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="渠道">
						<el-select v-model="form.source" placeholder="请选择">
							<el-option v-for="item in channelPage" :key="item.id" :value="item.id"
								:label="item.channelName"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="意向度">
						<el-rate v-model="form.purpose"></el-rate>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="客户级别">
						<el-select placeholder="请选择" v-model="form.level">
							<el-option v-for="item in dicts.recruit_customer_level" :key="item.id" :value="item.v"
								:label="item.k"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="意向课程">
						<el-select v-model="form.purposeCourseIds" placeholder="请选择">
							<el-option v-for="item in subjectPage" :key="item.id" :value="item.id"
								:label="item.subjectName"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="意向班级">
						<el-select v-model="form.purposeClassIds" placeholder="请选择">
							<el-option v-for="item in classPage" :key="item.id" :value="item.id"
								:label="item.className"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="学员性别">
						<el-radio-group v-model="form.gender">
							<el-radio v-for="item in dicts.system_global_gender" :key="item.id" :value="item.v"
								:label="item.k"></el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="学员学历">
						<el-select v-model="form.education" placeholder="请选择学员学历">
							<el-option v-for="item in dicts.recruit_education_background" :key="item.id" :value="item.v"
								:label="item.k"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="所在地区">
						<XlxCitySelect :dialogVisible="dialogVisible" :province="form.province" :city="form.city"
							:county="form.county" @addSuccess="getCity"></XlxCitySelect>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注">
						<el-input type="textarea" maxlength="200" show-word-limit v-model="form.remark"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="postRoleData">确认</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { getClassPageApi } from '@renderer/api/class';
import { getChannelPageApi } from '@renderer/api/media';
import { getConsultDetailApi, postConsultUpdateApi } from '@renderer/api/recruit';
import { getSubjectPageApi } from '@renderer/api/subject';
import { useDicts } from '@renderer/composables/dicts';
import { ClassItem } from '@renderer/interface/class';
import { ChannelItem } from '@renderer/interface/media';
import { Customer } from '@renderer/interface/recruit';
import { SubjectItem } from '@renderer/interface/subject';
import { ref, watch } from 'vue';

// 父组件传参
const props = defineProps<{
	id: string
}>()
// 自定义事件
const emits = defineEmits(['addSuccess'])
// 接收父组件的 v-model
const dialogVisible = defineModel({ default: false })

/* 表单数据 */
const form = ref<Customer>({
	name: '',
	mobile: '',
	wechat: '',
	source: '',
	purpose: 0,
	purposeCourseIds: '',
	purposeClassIds: '',
	level: '',
	dealStatus: '',
	dealTime: '',
	gender: '',
	education: '',
	province: '',
	city: '',
	county: '',
	age: 0,
	school: '',
	major: '',
	remark: ''
})
const { dicts } = useDicts(['recruit_customer_level', 'system_global_gender', 'recruit_education_background'])

// 根据id获取详情数据
const getFormData = async () => {
	const { code, data } = await getConsultDetailApi(props.id)
	if (code !== '200') return

	form.value = data as any
}
// 获取渠道列表
const channelPage = ref<ChannelItem[]>([])
const getChannelPageData = async () => {
	const { code, data } = await getChannelPageApi()
	if (code !== '200') return

	channelPage.value = data.records
}
// 获取科目列表
const subjectPage = ref<SubjectItem[]>([])
const getSubjectPageData = async () => {
	const { code, data } = await getSubjectPageApi()
	if (code !== '200') return

	subjectPage.value = data.records
}
// 获取班级列表
const classPage = ref<ClassItem[]>([])
const getClassPageData = async () => {
	const { code, data } = await getClassPageApi()
	if (code !== '200') return

	classPage.value = data.records
}
// 获取地区信息
const getCity = (val: string[]) => {
	form.value.province = val[0]
	form.value.city = val[1]
	form.value.county = val[2]
}

/* 确认按钮 */
// 提交数据
const postRoleData = async () => {
	const { code } = await postConsultUpdateApi(form.value)
	if (code !== '200') return

	ElMessage({
		type: 'success',
		message: '修改客户信息成功~'
	})
	dialogVisible.value = false

	// 通知父组件
	emits('addSuccess')
}

watch(() => dialogVisible.value, () => {
	if (dialogVisible.value) {
		getFormData()
		getChannelPageData()
		getSubjectPageData()
		getClassPageData()
	}
})
</script>

<style scoped lang="scss"></style>
